﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowCharts.aspx.cs" Inherits="Research.Web.ShowCharts" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>燃尽图显示</title>
    
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/highcharts.js" type="text/javascript"></script>
    <script src="Scripts/exporting.js" type="text/javascript"></script>
    <script src="Scripts/highslide-full.min.js" type="text/javascript"></script>
    <script src="Scripts/highslide.config.js" type="text/javascript"></script>
    <link href="Scripts/highslide.css" rel="stylesheet" type="text/css" />

     <script type="text/javascript">

         var request = {
             QueryString: function(val) {
                 var uri = window.location.search;
                 var re = new RegExp("" + val + "\=([^\&\?]*)", "ig");
                 return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
             },

             QueryStrings: function() {
                 var uri = window.location.search;
                 var re = /\w*\=([^\&\?]*)/ig ;
                 var retval = [];
                 var arr;
                 while ((arr = re.exec(uri)) != null)
                     retval.push(arr[0]);
                 return retval;
             },

             setQuery: function(val1, val2) {
                 var a = this.QueryStrings();
                 var retval = "";
                 var seted = false;
                 var re = new RegExp("^" + val1 + "\=([^\&\?]*)$", "ig");
                 for (var i = 0; i < a.length; i++) {
                     if (re.test(a[i])) {
                         seted = true;
                         a[i] = val1 + "=" + val2;
                     }

                 }

                 retval = a.join("&");
                 return "?" + retval + (seted ? "" : (retval ? "&" : "") + val1 + "=" + val2);
             }
         };
     

         var chart;
         var allVisits = [],
               newVisitors = [],
               testVisitors = [];

         $(function () {

             // define the options
             var options = {
                 chart: {
                     renderTo: 'container'
                 },

                 title: {
                     text: ''// request.QueryString("Title")
                 },

                 subtitle: {
                     text: ''
                 },

                 credits: {
                 hrelf:"",
                 text:"上海市城市建设设计研究总院"
                 },

                 xAxis: {
                     type: 'datetime',
                     tickInterval: 30 * 24 * 3600 * 1000, // one week
                     tickWidth: 0,
                     //gridLineWidth: 1,
                     labels: {
                         rotation: -45, 
                         formatter: function () {

                             return Highcharts.dateFormat('%Y-%m-%d', this.value);
                         },


                         align: 'left',
                         x: 3,
                         y: 30

                     }
                 },

                 yAxis: [{
                     // left y axis
                     title: {
                         text: null
                     },
                     labels: {
                         align: 'left',
                         x: 3,
                         y: 16,
                         formatter: function () {
                             return Highcharts.numberFormat(this.value, 0);
                         }
                     },
                     showFirstLabel: false
                 }, {
                     // right y axis
                     linkedTo: 0,
                     gridLineWidth: 0,
                     opposite: true,
                     title: {
                         text: null
                     },
                     labels: {
                         align: 'right',
                         x: -3,
                         y: 16,
                         formatter: function () {
                             return Highcharts.numberFormat(this.value, 0);
                         }
                     },
                     showFirstLabel: false
                 }],

                 legend: {
                     align: 'left',
                     verticalAlign: 'top',
                     y: 20,
                     floating: true,
                     borderWidth: 0
                 },

                 tooltip: {
                     shared: true,
                     crosshairs: true
                 },

                 plotOptions: {
                     series: {
                         cursor: 'pointer',
                         point: {
                             events: {
                                 click: function () {
                                     hs.htmlExpand(null, {
                                         pageOrigin: {
                                             x: this.pageX,
                                             y: this.pageY
                                         },
                                         headingText: this.series.name,
                                         maincontentText: Highcharts.dateFormat('%Y-%m-%d', this.x) + ':<br/> ' +
                                       this.y + ' visits',
                                         width: 200
                                     });
                                 }
                             }
                         },
                         marker: {
                             lineWidth: 1
                         }
                     }
                 }


             };
             
             $.ajax({
                 type: "post", //注意这里是 post
                 url: "MyWebService.asmx/DrawChart",
                 data: "{rPrjID:" + request.QueryString("RPrjID") + "}", //"{rPrjID:"+ request('RPrjID')+"}",
                 contentType: "application/json;charset=utf-8", //提交数据的方法格式
                 dataType: "json", //返回数据的格式
                 success: function (result) {
                     data = jQuery.parseJSON(result.d);
                     options.series = data;
                     chart = new Highcharts.Chart(options);
                 },

                 error: function (result) { alert(result.responseText); }
             });

             chart = new Highcharts.Chart(options);
         });


    
    </script>

    
    
    

</head>
<body>
    <form id="form1" runat="server">
    <ext:PageManager ID="PageManager1" runat="server" />
    
    
    <ext:Panel ID="Panel1" runat="server" BodyPadding="5px" EnableBackgroundColor="true"
        ShowBorder="False" ShowHeader="False" Title="Panel" Width="950px" Layout="Column">
        <Items>
    

    <ext:SimpleForm ID="sfPlanSchedule" runat="server" BodyPadding="5px" 
                EnableBackgroundColor="true" ShowBorder="True" ShowHeader="False"
        Title="计划进度显示" Width="600px" CssStyle=" padding: 10px;" Height="250px">
        <Toolbars>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:Button ID="btnScheduleAdd" runat="server" Text="添加" Icon="Add">
                    </ext:Button>
                    <ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server">
                    </ext:ToolbarSeparator>
                    <ext:Button ID="btnScheduleUpdate" runat="server" Text="修改" Icon="ApplicationEdit">
                    </ext:Button>
                    <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server">
                    </ext:ToolbarSeparator>
                    <ext:Button ID="btnScheduleDel" runat="server" Text="删除" Icon="Delete" OnClick="btnScheduleDel_Click" EnableAjax="False">
                    </ext:Button>

                </Items>
                
            </ext:Toolbar>
        </Toolbars>
        <Items>
            <ext:Grid ID="gridPlanSchedule" runat="server" EnableCheckBoxSelect="False" EnableRowNumber="False"
                Title="计划进度" EnableMultiSelect="False" 
                DataKeyNames="AutoNum,PlanBegDate,PlanEndDate" EnableRowClick="True" Height="218px"
                OnRowClick="gridPlanSchedule_RowClick">
                <Columns>
                    <ext:BoundField Width="40px" DataField="ScheduleSort" HeaderText="序号"/>
                    <ext:BoundField Width="80px" DataField="ScheduleName" HeaderText="节点"/>
                    <ext:BoundField Width="90px" DataField="PlanBegDate" HeaderText="计划开始时间" DataFormatString="{0:d}"/>
                    <ext:BoundField Width="90px" DataField="PlanEndDate" HeaderText="计划结束时间" DataFormatString="{0:d}"/>                    
                    <ext:BoundField Width="90px" DataField="PlanMemo" HeaderText="备注"/>
                    <ext:BoundField Width="50px" DataField="FinishPercentage" HeaderText="完成率"/>
                </Columns>
            </ext:Grid>
        </Items>
    </ext:SimpleForm>

    <ext:SimpleForm ID="sfActualSchedule" runat="server" BodyPadding="5px" EnableBackgroundColor="true" ShowBorder="True"
        Title="实际进度" Width="300px" CssStyle=" padding: 10px;" ShowHeader="False" Height="250px">
        <Items>
                 <ext:NumberBox ID="nbxPercentage" runat="server" Label="完成百分比" Required="True" MaxValue="100" MinValue="0">
                 </ext:NumberBox>
                 <ext:Button runat="server" ID="btnAdd" Text="添加" Icon="Add" 
                     ValidateForms="sfActualSchedule"  CssStyle="float:left;" 
                     OnClick="btnAdd_Click" EnableAjax="False">
                 </ext:Button>
                 <ext:Button runat="server" ID="btnDel" Text="删除" Icon="Delete" EnableAjax="False"
                     OnClick="btnDel_Click">
                 </ext:Button>
                 <ext:Grid ID="gridActualSchedule" runat="server" EnableCheckBoxSelect="False" EnableRowNumber="True"
                        Title="实际进度" EnableMultiSelect="False" DataKeyNames="RprjID,AutoNum,RegDate" Height="170px">
                        <Columns>
                            <ext:BoundField Width="100px" DataField="RegDate" HeaderText="登记日期" DataFormatString="{0:d}"/>                    
                            <ext:BoundField Width="100px" DataField="Percentage" HeaderText="完成百分比"/>
                        </Columns>
                  </ext:Grid>
        </Items>
    </ext:SimpleForm>
      </Items>
    </ext:Panel>

    <div id="container" style="min-width: 400px; height: 300px; margin: 0 auto"></div>
   
    <ext:Window ID="windowPlanSchedule" Title="计划进度管理" Hidden="True" CloseAction="HidePostBack" 
        EnableIFrame="true" runat="server" IsModal="True" Width="350px" Height="250px"  
        EnableResize="True" onclose="windowPlanSchedule_Close">
    </ext:Window>
    

    </form>
</body>
</html>
